@import "./../assets/scss/index.scss";

[hidden] {
  display: none !important;
}


$nav-h:pxTorem(52px);
html{ overflow: hidden;}  
html,body,app{height: 100%;width: 100%;}
html, body, * {font-family: "Microsoft YaHei" ;-webkit-user-select:none;user-select:none;}
a{ text-decoration: none} 



app{position: relative;}
:host{display: block;height: 100%;width: 100%;font-size: pxTorem(26px);}
.app-warning{
    position: absolute;bottom: pxTorem(52px);line-height: pxTorem(48px);background: #d94141;color: white;padding-left:pxTorem(10px);width:100%;z-index:9999;
    .warning{color: white;vertical-align: sub;margin-right: pxTorem(10px);}
    span{font-size: pxTorem(24px);}
    .icon-clear{color: white;float: right;margin-right: pxTorem(20px);font-size: pxTorem(34px); }
    .icon-warning{font-size: pxTorem(30px);}
}
nav{
    $count-h:32px;
    color: #ffffff;display: flex;align-items: center;height: $nav-h;width:100%;font-size:pxTorem(20px);background:#3d3d3d;
    .kdsname{
        position: relative;
        i{
            width:0; height:0; border-width:8px 8px; border-right-width: 0px; position: absolute;
            border-style:solid; border-color:#ffffff  #ffffff transparent transparent;
        }
    }
    .time{margin-right: pxTorem(30px);}
    .count-name{
        text-align: center;
        span{min-width: $count-h;box-sizing: border-box;padding: 0 8px;line-height: pxTorem( $count-h);border-radius: $count-h;display: inline-block;}
    }
    .power{width: pxTorem(52px);border-right: 1px solid grey;margin-right: pxTorem(30px);}
    i{color: #ffffff;font-size: pxTorem(25px) !important;}
    button.a{    
        width: pxTorem(56px);border-left:1px solid grey;height: 100%;
        &.active{background: $mpj-primary;}
    }
    button{
        &.active{background: $mpj-primary;}
        &.zero{
           .count{background: transparent;color: #bdbdbd;display: none;} 
           i{color: #bdbdbd;}
        }
        width: pxTorem(127px);border-left:1px solid grey;height: 100%;font-size:pxTorem(20px);
        .count{
            margin: 0 pxTorem(8px);min-width: pxTorem($count-h);line-height: pxTorem($count-h);border-radius: $count-h;background: #ff8800;
            text-align: center;color: white;font-size: pxTorem(24px);box-sizing: border-box;padding: 0 8px;
        }
        i.disabled{color: #bdbdbd;}
    }
    .paging{
        i{font-size: pxTorem(45px) !important;}
    }
}
main{height: calc(100% - 2.6rem);width: 100%;}


.container {
    width: 100%;height: 100%;
    .sidenav-content {
        height: 100%;
    }
    .sidenav {
        background: #f0f0f0;
        ul{
            width: pxTorem(257px);height: 100%;position: relative;
            li{padding: pxTorem(16px) 0;border-bottom: 1px solid grey;padding-left: pxTorem(30px);}
            li:last-child{
                position: absolute;bottom:0;width:100%;border-top: 1px solid grey;border-bottom: 1px solid grey;
            }
        }
        .exit{width: 100%;position: absolute;bottom:0;border-top: 1px solid grey;}
        .nav-item{
            .icon{margin-right: pxTorem(12px);font-size: pxTorem(24px)}
            .title{vertical-align: top;}
        }
    }
}



